<template> 
	<div class="app-container">
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">
					查询搜索
				</el-button>
				<el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
					重置
				</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="手机号：">
						<el-input v-model="listQuery.phone" class="input-width" placeholder="手机号" clearable></el-input>
					</el-form-item>
					<el-form-item label="姓名：">
						<el-input v-model="listQuery.name" class="input-width" placeholder="姓名" clearable></el-input>
					</el-form-item>
					<el-form-item label="预约时间：">
						<el-date-picker class="input-width" v-model="listQuery.createTime" type="date" placeholder="请选择时间" clearable>
						</el-date-picker>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card class="operate-container" shadow="never">
			<i class="el-icon-tickets"></i>
			<span>数据列表</span>
			<el-button size="mini" class="btn-add" @click="handleExport()">全部导出</el-button>
		</el-card>
		<div class="table-container">
			<el-table ref="centerApptTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
				<el-table-column type="selection" width="60" align="center"></el-table-column>
				<el-table-column label="编号" width="100" align="center">
					<template slot-scope="scope">{{scope.row.id}}</template>
				</el-table-column>
				<el-table-column label="手机号" width="120" align="center">
					<template slot-scope="scope">{{scope.row.phone}}</template>
				</el-table-column>
				<el-table-column label="姓名" width="240" align="center">
					<template slot-scope="scope">{{scope.row.name}}</template>
				</el-table-column>
				<el-table-column label="身份证号码" width="240" align="center">
					<template slot-scope="scope">{{scope.row.code}}</template>
				</el-table-column>
				<el-table-column label="邮箱" width="center" align="center">
					<template slot-scope="scope">{{scope.row.email}}</template>
				</el-table-column>
				<el-table-column label="预约时间" width="240" align="center">
					<template slot-scope="scope">
						<p>{{scope.row.createTime | formatCreateTime}}</p>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- <div class="batch-operate-container">
			<el-select v-model="batchExport" @change="handleExportOption" clearable placeholder="批量导出" class="filter-item" style="width: 130px">
				<el-option v-for="item in exportOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div> -->
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper"
			 :page-size="listQuery.pageSize" :page-sizes="[10,15,50]" :current-page.sync="listQuery.pageNum" :total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		fetchList,
		download,
		exportList,
	} from '@/api/centers/centerAppt';
	import {
		formatDate
	} from '@/utils/date';
	import axios from 'axios';
	// import store from '@/store';
	// const storeId = store.getters && store.getters.storeId;
	const defaultListQuery = {
		pageNum: 1,
		pageSize: 10,
		name: null,
		type: null,
		createTime: null,
		beginTime: null,
	};
	export default {
		name: 'centerApptList',
		data() {
			return {
				delLoading: false,
				status: '-9',
				orderType: '0',
				createTime: '',
				checkList: [],
				printChecked: false,
				batchHandle: '',
				batchExport: '',
				listContent: [],
				listQuery: Object.assign({}, defaultListQuery),
				list: null,
				total: null,
				listLoading: false,
				multipleSelection: [],
				exportOptions: [{
						value: '',
						label: '批量导出'
					},
					{
						value: '0',
						label: '导出全部'
					},
					{
						value: '1',
						label: '导出选中'
					},
				],
			}
		},
		created() {
			this.getList();
		},
		filters: {
			formatCreateTime(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
		},
		methods: {
			formatCreateTime(time) {
				if (time) {
					let date = new Date(time);
					return formatDate(date, "yyyy-MM-dd hh:mm:ss");
				}

			},
			handleResetSearch() {
				this.listQuery = Object.assign({}, defaultListQuery);
			},
			handleSearchList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			getList() {
				this.listLoading = true;
				console.log(this.listQuery)
				fetchList(this.listQuery).then(response => {
					this.listLoading = false;
					this.list = response.data.records;
					this.total = response.data.total;
				})
			},
			handleExport() {
				exportList(this.listQuery).then(response => {
					this.list = response.data;
					// window.open(process.env.BASE_API+'pms/PmsProduct/exportExcel')
					var newArr = JSON.parse(JSON.stringify(this.list));
					for (let i = 0; i < newArr.length; i++) {
						const element = newArr[i];
						newArr[i]["createTime"] = this.formatCreateTime(newArr[i]["createTime"]);
					}
					import("@/vendor/Export2Excel").then((excel) => {
						const tHeader = [
							"编号",
							"姓名",
							"身份证号",
							"手机号",
							"邮箱",
							"预约时间"
						];
						const filterVal = [
							"id",
							"name",
							"code",
							"phone",
							"email",
							"createTime"
						];
						console.log(tHeader, newArr, filterVal, "H5预约列表")
						excel.export_json_to_excel2(tHeader, newArr, filterVal, "H5预约列表");
					});
				})

				// axios({
				// 	method: 'get',
				// 	url: 'http://localhost:8085/center/appt/exportExcel',
				// 	responseType: 'blob'
				// }).then((res) => {
				// 	console.log(res)
				// 	const link = document.createElement('a')
				// 	let blob = new Blob([res.data], {
				// 		type: 'application/vnd.ms-excel'
				// 	});
				// 	link.style.display = 'none'
				// 	link.href = URL.createObjectURL(blob);
				// 	let num = ''
				// 	for (let i = 0; i < 10; i++) {
				// 		num += Math.ceil(Math.random() * 10)
				// 	}
				// 	link.setAttribute('download', 'H5预约_' + num + '.xls')
				// 	document.body.appendChild(link)
				// 	link.click()
				// 	document.body.removeChild(link)
				// }).catch(error => {
				// 	this.$Notice.error({
				// 		title: '错误',
				// 		desc: '网络连接错误'
				// 	})
				// 	console.log(error)
				// })
			}
		}
	}
</script>
<style scoped>
	.input-width {
		width: 203px;
	}
</style>
